<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>仪表盘</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="container py-5">
        <h1 class="mb-4">欢迎来到学生知识管理系统</h1>
        <p>这是系统的首页，您可以在这里查看系统概况、统计数据以及快速访问常用功能。</p>
        <div class="row mt-4">
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-users fa-2x text-primary mb-2"></i>
                        <h5 class="card-title">总用户数</h5>
                        <p class="card-text" id="userCount">1,258</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-file-text-o fa-2x text-success mb-2"></i>
                        <h5 class="card-title">知识文章</h5>
                        <p class="card-text" id="articleCount">568</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-star fa-2x text-warning mb-2"></i>
                        <h5 class="card-title">今日积分</h5>
                        <p class="card-text" id="todayPoints">2,450</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-download fa-2x text-danger mb-2"></i>
                        <h5 class="card-title">下载次数</h5>
                        <p class="card-text">3,879</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {
        // Fetch dashboard data
        $.ajax({
            url: 'http://localhost:8082/api/dashboard',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                if (data.code === 200 && data.data) {
                    $('#userCount').text(data.data.userCount);
                    $('#articleCount').text(data.data.articleCount);
                    $('#todayPoints').text(data.data.todayPoints);
                } else {
                    console.error('获取仪表盘数据失败:', data.msg);
                    // Optionally, update UI to show error
                    $('#userCount').text('加载失败');
                    $('#articleCount').text('加载失败');
                    $('#todayPoints').text('加载失败');
                }
            },
            error: function() {
                console.error('无法连接到仪表盘接口');
                // Optionally, update UI to show error
                $('#userCount').text('连接错误');
                $('#articleCount').text('连接错误');
                $('#todayPoints').text('连接错误');
            }
        });
    });
</script>
</html> 